<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        canvas{
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <canvas width="600" height="500"></canvas>
</body>
</html>
<script>
    var data = [
        { x: 1, y: 200 },
        { x: 2, y: 400 },
        { x: 3, y: 150 },
        { x: 4, y: 300 },
        { x: 5, y: 400 },
        { x: 6, y: 100 },
        { x: 7, y: 80 },
        { x: 8, y: 120 },
        { x: 9, y: 500 },
        { x: 10, y: 100 },
        { x: 11, y: 100 },
        { x: 12, y: 500 },
    ]
    var can=document.querySelector('canvas').getContext('2d')
    can.translate(50,350)
    can.moveTo(0,0)
    can.lineTo(500,0)
    can.stroke()
    var w=450/data.length
    for(var i=1;i<=data.length;i++){
        can.moveTo(w*i,0)
        can.lineTo(w*i,-10)
        can.stroke()
        can.font='20px 宋体'
        can.textAlign='center'
        can.textBaseline='middle'
        can.fillText(i,w*i,20)
    }
    can.moveTo(0,0)
    can.lineTo(0,-300)
    can.stroke()
    var h=250/12
    for(var i=1;i<=12;i++){
        can.moveTo(0,-h*i)
        can.lineTo(10,-h*i)
        can.stroke()
        can.font='20px 宋体'
        can.textAlign='center'
        can.textBaseline='middle'
        can.fillText(i*50,-20,-h*i);
    }
    for(var i=0;i<data.length;i++){
        if(i===0){
            can.moveTo(w*data[i].x,-h*data[i].y/50)
        }else{
            can.lineTo(w*data[i].x,-h*data[i].y/50)
        }
        can.fillRect(w*data[i].x-10,-h*data[i].y/50,20,h*data[i].y/50)
    }
    can.stroke()
</script>